<template>
  <!-- LOGIN -->
  <div class="row margin-right-0 standard-bg">
    <div class="container">
      <section class="registration col-lg-12 col-md-12">
        <div class="row secBg">
          <div class="large-12 columns">
            <div class="login-register-content">
              <div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
                <div class="col-md-12 text-center login-header">
                  <h1 class="title main-head-title" style="font-weight: 900;margin-bottom: 30px;">用户登录</h1>
                    <p>登录即代表你同意<a href="#" style="color: #02a7de;">用户协议</a>和<a href="#" style="color: #02a7de;">隐私政策</a></p>
                </div>
                <div class="clearfix spacer"></div>
                <div class="col-md-5 social-login">
                  <div class="social-login" data-equalizer-watch>
                    <h2 class="title main-head-title">第三方登录</h2>
                    <div class="social-login-btn social-qq">
                      <a href="#"><i class="fa fa-qq"></i>QQ账号登录</a>
                    </div>
                    <div class="social-login-btn social-weixin">
                      <a href="#"><i class="fa fa-weixin"></i>微信账号登录</a>
                    </div>
                    <div class="social-login-btn social-weibo">
                      <a href="#"><i class="fa fa-weibo"></i>微博账号登录</a>
                    </div>
                    <div class="social-login-btn social-twitter">
                      <a href="#"><i class="fa fa-twitter"></i>推特账号登录</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="middle-sep">
                    <i class="fa fa-arrow-left arrow-left"></i>
                    <span>OR</span>
                    <i class="fa fa-arrow-right arrow-right"></i>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="register-form">
                    <h2 class="title main-head-title" v-if="isPwdLog">账号密码</h2>
                    <h2 class="title main-head-title" v-else>验证码登录</h2>
                    <form method="post" action="../index/Index.vue" data-abide novalidate>
                      <div v-if="isPwdLog">
                        <div class="input-group">
                          <span class="fa fa-user login-inputicon"></span>
                          <input type="text" id="username" v-model="username" placeholder="你的手机号/邮箱" required>
                        </div>
                        <div class="input-group">
                          <span class="fa fa-lock login-inputicon"></span>
                          <input type="password" id="password" v-model="password" placeholder="密码" required>
                        </div>
                      </div>
                      <div v-else>
                        <div class="input-group">
                          <span class="fa fa-phone login-inputicon"></span>
                          <input type="text" id="phone" @input="handlePhone" v-model="username" placeholder="请填写常用手机号" maxlength="11" required>
                        </div>
                        <div class="input-group" style="position: relative">
                          <span class="fa fa-comments login-inputicon"></span>
                          <input type="password" id="smsCode" @input="handleSmsCode" v-model="smsCode" placeholder="请输入短信验证码" maxlength="6" required>
                          <div class="btn-identify-box">
                            <button type="button" class="btn btn-primary btn-identify" @click="sendSmsCode" :disabled="sendDis">{{ sendText }}</button>
                          </div>
                        </div>
                      </div>
                      <div>
                        <div class="checkbox">
                          <input id="remember" type="checkbox" name="check" value="rememberMe" v-model="rememberMe">
                          <label class="customLabel" for="remember">记住我</label>
                        </div>
                        <div class="pwd-btn-box">
                          <span @click="logChange(false)" v-if="isPwdLog">短信登录</span>
                          <span @click="logChange(true)" v-else>密码登录</span>
                          <a href="#">忘记密码？</a>
                        </div>
                      </div>
                      <div class="login-btn-box">
                        <button class="access-btn btn-log" type="button" @click="login">登录</button>
                        <button class="access-btn btn-reg" type="button" @click="reg">注册</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
/**
* @isPwdLog 是否密码登录
*
* */
import {checkPhone, checkSmsCode} from '../../js/my-utils'
import {showMessage} from '../../js/my-plugin'

export default {
  name: 'Login',
  data () {
    return {
      isPwdLog: false,
      smsCode: '',
      username: '13027533552',
      password: '',
      sendText: '发送验证码',
      sendDis: false,
      rememberMe: false
    }
  },
  methods: {
    logChange (v) {
      this.isPwdLog = v
    },
    handlePhone (evt) {
      this.username = this.username.replace(/[^0-9]+/g, '')
      const value = evt.target.value
      console.log(checkPhone(value))
    },
    handleSmsCode () {
      this.smsCode = this.smsCode.replace(/[^0-9]+/g, '')
    },
    sendSmsCode (evt) {
      if (!checkPhone(this.username)) {
        showMessage('手机号格式错误', 0)
        return
      }
      // 发送验证码
      const data = {
        mobile: this.username,
        type: 'login'
      }
      this.$axios({
        method: 'post',
        url: '/api/user/sms',
        data: this.$qs.stringify(data)
      })
        .then((res) => {
          console.log(res.data)
          showMessage(res.data.msg, 1)
        })
        .catch((error) => {
          console.log(error)
          showMessage(error, 1)
        })
      let s = 60
      this.sendDis = true
      const timer = setInterval(() => {
        s--
        this.sendText = '重新发送（ ' + s + ' s ）'
        if (s === 0) clearInterval(timer)
      }, 1000)
      setTimeout(() => {
        this.sendText = '重新发送'
        this.sendDis = false
      }, s * 1000)
    },
    login () {
      if (!checkPhone(this.username)) {
        showMessage('手机号格式错误', 0)
        return
      }
      if (!this.isPwdLog) {
        if (!checkSmsCode(this.smsCode)) {
          showMessage('请填写完整验证码', 0)
          return
        }
      }
      const grantType = this.isPwdLog ? 'username' : 'mobile'
      const username = grantType + '-' + this.username
      const password = this.isPwdLog ? this.password : this.smsCode
      // 登录按钮
      const data = {
        username: username,
        password: password
      }
      this.$axios({
        method: 'post',
        url: '/api/user/login',
        data: this.$qs.stringify(data),
        headers: {rememberMe: this.rememberMe, grant_type: grantType}
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$store.commit('setToken', res.data.data)
            window.localStorage.setItem('authorization', res.data.data)
            showMessage(res.data.msg, 1)
            this.$router.push('/')
          } else {
            showMessage(res.data.msg, 0)
          }
        })
        .catch((error) => {
          console.log(error)
          showMessage('登陆失败，无法连接服务器', 0)
        })
    },
    reg () {
      // 注册按钮
      this.$router.push('/reg')
    }
  },
  mounted: function () {
    // 判断localStorage是否可用
    if (!(window.localStorage || typeof window.localStorage !== 'undefined')) {
      showMessage('localStorage不可用，建议更换浏览器', 0)
    }
  }
}
</script>

<style scoped>
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #dddddd;
  }

  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #dddddd;
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #dddddd;
  }

  input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #dddddd;
  }
</style>
